{{ header }}
<div id="checkout-cart" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  {% if attention %}
  <div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ attention }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  {% endif %}
  {% if success %}
  <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  {% endif %}
  {% if error_warning %}
  <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  {% endif %}
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
	  <ul class="thumbnails">
		{% if thumb %}
		<li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
		{% endif %}
		{% if images %}
		{% for image in images %}
		<li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
		{% endfor %}
		{% endif %}
	  </ul>
	  
	  <div class="tab-pane active" id="tab-description">{{ magevideo }}</div>
	  <div class="tab-pane active" id="tab-description">{{ description }}</div>
	  <div class="row">
		<div class="col-sm-7 col-md-7 col-xs-12">
			
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"><i class="fa fa-user panel-icon"></i>Shipping Information</h4>
				</div>
				<div class="panel-collapse "  id="collapse-payment-address">
					<div class="panel-body">{{ guesthtml }}</div>
				</div>
			</div>
		</div>
		<div class="col-sm-5 col-md-5 col-xs-12">
			
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"><i class="fa fa-credit-card panel-icon"></i>Payment Method</h4>
				</div>
				<div class="panel-collapse " id="collapse-payment-method">
					<div class="panel-body">{{ paymentmethod }}</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"><i class="fa fa-money panel-icon"></i>Order Review</h4>
				</div>
				<div class="panel-collapse " id="collapse-checkout-confirm">
					<div class="panel-body">{{ confirm }}</div>
				</div>
			</div>
		</div>
	</div>
      
            <div id="product">      
                <div class="form-group input-num-box">
				  <label class="control-label" for="input-quantity">{{ entry_qty }}</label>
					<br />
				  <span id="input2" class="reduce action">-</span>
				  <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control" />
				  <span id="input1" class="pus action">+</span>
				  <input type="hidden" name="product_id" value="{{ product_id }}" />
				  <input type="hidden" id="product_stock" value="{{ stockch }}" />
				  <br />
				  {#<button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn btn-primary btn-lg btn-block">{{ button_cart }}</button>#}
				  <span type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="add-to-cart">{{ button_cart }}</span>
				</div>
            </div>
    
        <div class="pull-right"><a href="{{ checkout }}" class="btn btn-primary">{{ button_checkout }}</a></div>
      </div>
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
<script>
  //商品数量的增加
	var Input0=document.getElementById('input-quantity');
	var Input1=document.getElementById('input1');
	var Input2=document.getElementById('input2');
	var product_stock=document.getElementById('product_stock').value;
	
		Input1.onclick=function(){
		    if(product_stock==Input0.value){
			   alert('Purchase quantity must not exceed inventory!');
			   return;
			}
			Input0.value++;
		}
		
		Input2.onclick=function(){
				if(Input0.value>1){
				Input0.value--;
			}
		}
</script>
{{ footer }} 
